<template>
	<!--pages/find/find.wxml-->
	<view class="content-find">
		<view class="find-header">
		    <view class="find-search">
		      <view class="find-s-box">
		        <text class="iconfont icon-sousuo1"></text>
		        <input type="text" placeholder="请输入您想去的国家或城市" v-model="inputtype" />
		      </view>
		      <text class="text-search" @click="goList">搜索</text>
		    </view>
		    <view class="find-h-list">
		      <view @click="changejijie('con')" class="con" :class="active==='con'?'list-active':''">
		        <text data-title="con">洲</text>
		      </view>
		      <view @click="changejijie('sea')" class="sea" :class="active==='sea'?'list-active':''">
		        <text data-title="sea">季节</text>
		      </view>
		    </view>
		    <view class="find-h-place" v-if="active === 'con'">
		      <text v-for="(item, index) in arrCon" :key="index" @click="changetype(item)" :class="activeacccon === item?'ac':'' ">{{ item }}</text>
		    </view>
		  </view>
		
		  <view class="find-land" v-if="active === 'con'">
		    <view v-for="(item, index) in zhoulist" :key="index">{{ item.country }}</view>
		  </view>
		
		  <!-- 季节 -->
		  <view class="content" v-if="active === 'sea'">
		    <text v-for="(item, index) in jijieArr" :key="index" @click="changetype(item)" :class="jijiesea === item?'active':''">{{ item }}</text>
		  </view>
		
		  <view class="content-product" v-if="active === 'sea'">
		    <view class="ul">
		      <view class="li" v-for="(item, index) in jijielist" :key="item.product_id">
		        <!-- -->
		        <view class="product-img">
		          <image :src="item.pro_pic_url" alt=""></image>
		        </view>
		        <text class="ptoi-text">{{ item.pro_title }}</text>
		        <view class="product-list">
		          <text class="iconfont icon-mudedi"> {{ item.country }}</text> |
		          <text class="iconfont icon-shijian1"> {{ item.routing_data }}天{{ item.routing_nigth }}晚</text> |
		          <text class="iconfont icon-shoucang1"> {{ item.collection_num }}</text>
		        </view>
		      </view>
		    </view>
		  </view>
	</view>
	
</template>

<script>

		import http from  "../../until/http.js";
	export default {
		data() {
			return {
				 arrCon : ['欧洲', '亚洲', '大洋洲', '非洲', '北美洲', '南美洲'],
				    jijieArr:['春意阑珊','盛夏果实','秋来秋去','冬之恋曲'],
				    activeacccon:'欧洲',
				    zhoulist:[],
				    inputtype:'',
				    active:'con',
				    jijielist:[],
				    jijiesea:"春意阑珊",
			}
		},
		onLoad() {
  
    this.loaddata();
    this.loadjijiedata()

		},
		methods: {
  changejijie(item){
	  console.log(item);
	  
  
  this.active=item


  },

  goList(){
	  console.log(this.inputtype);
	  if(this.inputtype!==''){
		  uni.navigateTo({
		    url: '/pages/list/index?inputtype='+this.inputtype,
		  })
		  
	  }
  
  },

  changetype(ev){
 

const title=ev
if(this.active==='con'){
  this.activeacccon=title
  this.loaddata()

}else{
  this.jijiesea=title
  this.loadjijiedata()
}


 
  },
  loaddata(){
    http.request('/requirement/destination/countries/'+this.activeacccon,'GET','').then(res=>{
   
      this.zhoulist=res.data
    })
  }
  ,
  loadjijiedata(){
    http.request('/requirement/request/getMatchedProducts','POST',{"request_season":[this.jijiesea],"product_type":1}).then(res=>{
    
      this.jijielist=res.data.matchedProducts
      
   
    })
  },
		}
	}
</script>

<style>

.find-h-list .list-active{
	border-bottom: 3px solid #000;
}
.find-header{
    background: #f2f2f2;
}
.find-search {
    height: 55.9988px;
    display: flex;
    justify-content: center;
    align-items: center;
 

}

.find-s-box {
    width: 270px;
    height: 34.9988px;
    padding: 0 7.5px;
    display: flex;
  
    align-items: center;
    background-color: white;
    border-radius: 25.0012px;
}

.find-s-box text {
    font-size: 19.9988px;
    margin-right: 18px;
    margin-left: 7.0012px;
    color: #455457;
}

.find-s-box input {
    width: 90%;
    /* border: none; */
    /* border: 1px solid #333; */
    outline: none;
    height: 18px;
}

.find-h-list {
	width: 100%;
    height: 40.0012px;
    display: flex;
    justify-content: center;
}


.find-h-list .sea {
    color: #445356;
    width: 35.0012px;
    text-align: center;
    font-size: 13.9988px;
    line-height: 40.0012px;
    position: relative;
}
.find-h-list .con{
	color: #445356;
	width: 20.0012px;
	text-align: center;
	font-size: 13.9988px;
	line-height: 40.0012px;
	position: relative;
	margin-right:200rpx ;
}



.find-h-place {
    background-color: #cbcaca;
    height: 40.0012px;
    margin-bottom: 12px;
    /* width: calc(100% - 49.9987px); */
    padding: 0 .6667rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.find-h-place text {
    color: #fff;
    font-size: 13.9988px;
}

.find-h-place .ac {
    background-color: #878e90;
    padding: 2.5012px 7.0012px;
    border-radius: 4.9988px;
}



.find-land {
    margin: 0 50rpx;
    /* margin-top: 330rpx; */
    display: flex;
    flex-wrap: wrap;
  justify-content: center;
  }
  .find-land > view {
    padding: 10rpx 30rpx;
    margin: 30rpx 10rpx;
    border: 2rpx solid #000;
    border-radius: 100rpx;
    font-size: 24rpx;
  }
.find-search .text-search{
    width: 86rpx;
    height: 70rpx;
    font-size: 28rpx;
    color: #666666;
    margin: 35rpx 0 0 15rpx;

}
/* .li{
   width: 180rpx;
   height: 60rpx;
   line-height: 60rpx;
   text-align: center;
    padding: 2.3438px 7.0313px;
    border: 1px solid #cdcdcd;
    border-radius: 20px;
    margin: 7.0313px 2.3438px;
    color: #9b9b9b;
    padding: 0 5.8594px;
} */

.content{
    display: block;
    background-color: #cbcaca;
    height: 40.0012px;
    margin-bottom: 12px;
    /* width: calc(100% - 49.9987px); */
    padding: 0 .6667rem;
    display: flex;
    align-items: center;
    justify-content: space-around;

}
.content text{
    color: #fff;
    font-size: 13.9988px;  
}
.active{
    background-color: #878e90;
    padding: 2.5012px 7.0012px;
    border-radius: 4.9988px;
}

/* 州list */
.content-product {
    /* margin-left: 40rpx; */
    display: flex;
}

.content-product .ul {
    /* margin-left: 70rpx; */
    display: flex;
    flex-direction: column;
   
}

.content-product .li {
    padding: 0 12px 12px;
    margin: 12px 24rpx;
    font-size: 13.9988px;
    height: 580rpx;
    width: 90%;
 
}

.search_product .ul .li>image {
    width: 351px;
    height: 186px;
}

.ul .li .ptoi-text {
    color: #919292;
    text-align: center;
    margin-left: 180rpx;
    height: 33px;
    line-height: 33px;
}

.product-list {
    height: 18px;
    text-align: center;
}

.product-list text {
    text-align: center;
    font-size: 13.9988px;
}

.product-list text {
    color: #ccc;
    font-size: 12px;
}

.product-list text:last-child {
    color: #000;
}
	
</style>
